<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml"
      xmlns:h="http://java.sun.com/jsf/html"
      xmlns:f="http://java.sun.com/jsf/core"
      xmlns:ui="http://java.sun.com/jsf/facelets"
      xmlns:p="http://primefaces.org/ui"
      xmlns:c="http://java.sun.com/jsp/jstl/core">


    <ui:composition template="/plantillas/plantillaPrincipal.xhtml">

        <ui:define name="contenido">
            <f:view>
                <h:form id="formulario">

                    <p:fieldset legend="DETALLE DE CAJA CHICA" toggleable="true" toggleSpeed="500"
                                style="width:70%;margin: 10px auto;">
                        <p:ajax event="toggle"/>

                        <p:panelGrid id="panelConsultaMovimientos" style="width:100%;margin: 10px auto;" > 

                            <p:row>
                                <p:column style="width:180px">
                                    <h:outputLabel id="lblSede" value="SEDE: " styleClass="lblForm" />
                                </p:column>                                
                                <p:column>
                                    <h:outputLabel value="#{BKCajaChica.cajaChicaFormulario.idSede.nombre}" />
                                </p:column>

                                <p:column>
                                    <h:outputLabel id="lblEstado" value="ESTADO: " styleClass="lblForm" />
                                </p:column>	                            
                                <p:column>
                                    <h:outputLabel value="#{BKCajaChica.cajaChicaFormulario.descEstadoCajaChica}" />
                                </p:column>

                            </p:row>

                            <p:row>
                                <p:column style="width:180px">
                                    <h:outputLabel id="lblNumCheque" value="Nº DE CHEQUE: " styleClass="lblForm" />
                                </p:column>                                
                                <p:column>
                                    <h:outputLabel value="#{BKCajaChica.cajaChicaFormulario.idMovimientoCuentaBancaria.numFormaMovimiento}" />
                                </p:column>
                                <p:column>
                                    <h:outputLabel id="lblCodigoCaja" value="CODIGO DE CAJA: " styleClass="lblForm"  />
                                </p:column>	                            
                                <p:column>
                                    <h:outputLabel value="#{BKCajaChica.cajaChicaFormulario.nombre}" />
                                </p:column>
                            </p:row>

                            <p:row rendered="false">
                                <p:column>
                                    <h:outputLabel id="lblBanco" value="BANCO: " styleClass="lblForm" />
                                </p:column>	                            
                                <p:column>
                                    <h:outputLabel value="#{BKCajaChica.cajaChicaFormulario.idMovimientoCuentaBancaria.idCuentaBancaria.idBanco.nombre}" />
                                </p:column>

                                <p:column>
                                    <h:outputLabel id="lblNumeroCuenta" value="Nº CUENTA BANCARIA: " styleClass="lblForm" />
                                </p:column>
                                <p:column>
                                    <h:outputLabel value="#{BKCajaChica.cajaChicaFormulario.idMovimientoCuentaBancaria.idCuentaBancaria.numeroCuenta}" />
                                </p:column>

                            </p:row>
                            <p:row>
                                <p:column>
                                    <h:outputLabel id="lblMontoApertura" value="MONTO DE APERTURA: " styleClass="lblForm" />
                                </p:column>	                            
                                <p:column>
                                    <h:outputLabel value="#{BKCajaChica.cajaChicaFormulario.montoApertura}">
                                        <f:convertNumber maxFractionDigits="2" minFractionDigits="2"  groupingUsed="true" 
                                                         currencySymbol="#{BKCajaChica.cajaChicaFormulario.moneda.simbolo}" type="currency"/>
                                    </h:outputLabel>
                                </p:column>  

                                <p:column>
                                    <h:outputLabel id="lblSaldoCaja" value="SALDO DE CAJA: " styleClass="lblForm" />
                                </p:column>	                            
                                <p:column>
                                    <h:outputLabel value="#{BKCajaChica.cajaChicaFormulario.saldoCaja}">
                                        <f:convertNumber maxFractionDigits="2" minFractionDigits="2"  groupingUsed="true" 
                                                         currencySymbol="#{BKCajaChica.cajaChicaFormulario.moneda.simbolo}" type="currency"/>
                                    </h:outputLabel>
                                </p:column>

                            </p:row>

                            <p:row>
                                <p:column>
                                    <h:outputLabel id="lblFechaApertura" value="FECHA DE APERTURA: " styleClass="lblForm"  />
                                </p:column>	                            
                                <p:column>
                                    <h:outputLabel value="#{BKCajaChica.cajaChicaFormulario.fechaApertura}">
                                        <f:convertDateTime pattern="dd/MM/yyyy" />
                                    </h:outputLabel>
                                </p:column>
                                <p:column>
                                    <h:outputLabel id="lblFechaCierre" value="FECHA DE CIERRE: " styleClass="lblForm"  />
                                </p:column>	                            
                                <p:column>
                                    <h:outputLabel value="#{BKCajaChica.cajaChicaFormulario.fechaCierre}">
                                        <f:convertDateTime pattern="dd/MM/yyyy" />
                                    </h:outputLabel>
                                </p:column>
                            </p:row>



                            <p:row rendered="false">
                                <p:column>
                                    <h:outputLabel id="lblTipoCambio" value="TIPO DE CAMBIO: " styleClass="lblForm"  />
                                </p:column>	                            
                                <p:column>
                                    <h:outputLabel value="#{BKCajaChica.cajaChicaFormulario.tipoCambio}">
                                        <f:convertNumber maxFractionDigits="2" minFractionDigits="2"/>
                                    </h:outputLabel>
                                </p:column>

                                <p:column>
                                    <h:outputLabel id="lblMontoSoles" value="MONTO SOLES: " styleClass="lblForm"  />
                                </p:column>	                            
                                <p:column>
                                    <h:outputLabel value="#{BKCajaChica.cajaChicaFormulario.montoSoles}" >
                                        <f:convertNumber maxFractionDigits="2" minFractionDigits="2"/>
                                    </h:outputLabel>
                                </p:column>
                            </p:row>                                                       

                        </p:panelGrid>

                    </p:fieldset>

                    <p:panel id="pnlListarCajaChica" 
                             header="LISTA DE MOVIMIENTOS DE CAJA CHICA">

                        <h:panelGrid style="width:100%; margin: 10px auto;text-align: center">
                            <p:row>

                                <p:column style="text-align:left">
                                    <p:commandButton id="btnReporteCaja" action="#{MBCajaChica.reporteCajaChicaExcel()}"  
                                                     icon="ui-icon-search" value="Generar Reporte" immediate="true" ajax="false"
                                                     disabled="#{BKCajaChica.verResumenCaja eq true?false:true}" />
                                </p:column>
                                <p:column style="text-align:center">
                                    <p:commandButton id="btnTransferenciaSaldoCaja" action="#{MBCajaChica.nuevaTransferencia()}" 
                                                     icon="ui-icon-transferthick-e-w" value="Transferencia de Saldos entre Cajas" immediate="true" ajax="false"
                                                     disabled="#{BKCajaChica.cajaChicaFormulario.estadoCaja eq 'C'}"/>
                                </p:column>
                                <p:column style="text-align:right">
                                    <p:commandButton id="btnNuevoMovimiento" action="#{MBCajaChica.nuevoMovimiento()}" 
                                                     icon="ui-icon-plus" value="AGREGAR NUEVO MOVIMIENTO" immediate="true" ajax="false"
                                                     disabled="#{BKCajaChica.cajaChicaFormulario.estadoCaja eq 'C'}"/>
                                </p:column>

                            </p:row>
                            <br/>
                            <p:row>
                                <h:commandButton value="Exportar EXCEL">  
                                    <p:dataExporter type="xls" target="dataTablaMovimientos" fileName="MovimientosCajaChica"  />  
                                </h:commandButton>
                            </p:row>
                        </h:panelGrid>

                        <p:dataTable id="dataTablaMovimientos" var="movimientoCajaChica" rendered="true"
                                     value="#{BKMovimientoCajaChica.listaMovCajaChicaActivas}" widgetVar="listaMovimiento"
                                     emptyMessage="No se encontraron movimientos disponibles en caja chica"
                                     rowIndexVar="rowIndex" paginator="true" rows="10" 
                                     paginatorTemplate="{CurrentPageReport}  {FirstPageLink} {PreviousPageLink} 
                                     {PageLinks} {NextPageLink} {LastPageLink} {RowsPerPageDropdown}" 
                                     rowStyleClass="#{movimientoCajaChica.tipoMovimiento eq 'E' 
                                                      and movimientoCajaChica.estadoMovimiento eq 'C'?'vendido':null}"
                                     rowsPerPageTemplate="10,20,30"
                                     paginatorPosition="bottom" styleClass="datable-busqueda">

                            <p:column id="idColumnaNombreMov" style="width: 10%;text-align: center" sortBy="" 
                                      exportable="true">
                                <f:facet name="header">  
                                    <h:outputText value="Codigo" />  
                                </f:facet>
                                <h:outputText value="#{movimientoCajaChica.nombre}" />
                            </p:column>

                            <p:column id="idColumnaMotivo" style="width: 10%;text-align: center" sortBy="" 
                                      exportable="true">
                                <f:facet name="header">  
                                    <h:outputText value="Motivo" />  
                                </f:facet>
                                <h:outputText value="#{movimientoCajaChica.motivo}" />
                            </p:column>

                            <p:column id="idColumnaUnidadNegocio" style="width: 7%;text-align: center" exportable="true">
                                <f:facet name="header">  
                                    <h:outputText value="Unidad Negocio" />  
                                </f:facet>
                                <h:outputText value="#{movimientoCajaChica.descTipoUnidadNegocio}"/>
                            </p:column>


                            <p:column id="idColumnaSolicitante" style="width: 5%;text-align: center"
                                      sortBy="#{movimientoCajaChica.solicitante}" filterBy="#{movimientoCajaChica.solicitante}"
                                      exportable="true">
                                <f:facet name="header">  
                                    <h:outputText value="Solicitante" />  
                                </f:facet>
                                <h:outputText value="#{movimientoCajaChica.solicitante}" />
                            </p:column>

                            <p:column id="idColumnaFechaSolicitud" style="width: 8%;text-align: center"
                                      sortBy="#{movimientoCajaChica.fechaSolicitud}"
                                      exportable="true">
                                <f:facet name="header">  
                                    <h:outputText value="Fecha Solicitud" />  
                                </f:facet>
                                <h:outputText value="#{movimientoCajaChica.fechaSolicitud}">
                                    <f:convertDateTime pattern="dd/MM/yyyy" />
                                </h:outputText>

                            </p:column>

                            <p:column id="idColumnaEstado" style="width: 10%;text-align: center"
                                      sortBy="#{movimientoCajaChica.estadoMovimiento}" filterBy=""
                                      exportable="true">
                                <f:facet name="header">  
                                    <h:outputText value="Estado" />  
                                </f:facet>
                                <h:outputText value="#{movimientoCajaChica.descEstadoMovimiento}" />

                            </p:column>

                            <p:column id="idColumnaMonto" style="width: 10%;text-align: center"
                                      sortBy="#{movimientoCajaChica.monto}" exportable="true">
                                <f:facet name="header">  
                                    <h:outputText value="Monto Solicitado" />  
                                </f:facet>

                                <h:outputText value="#{movimientoCajaChica.tipoMovimiento eq 'E'?'+':'-'}" 
                                              style="#{movimientoCajaChica.tipoMovimiento eq 'E'?'color: blue':'color: red'};font-weight: bold">
                                </h:outputText>                                        
                                <h:outputText value="#{movimientoCajaChica.monto}" 
                                              style="#{movimientoCajaChica.tipoMovimiento eq 'E'?'color: blue':'color: red'};font-weight: bold">
                                    <f:convertNumber maxFractionDigits="2" minFractionDigits="2" />
                                </h:outputText>              

                            </p:column>

                            <p:column id="idColumnaVuelto" style="width: 10%;text-align: center" exportable="true">   

                                <f:facet name="header">  
                                    <h:outputText value="Por Rendir" />  
                                </f:facet>
                                <h:outputText value="#{movimientoCajaChica.saldo}" >
                                    <f:convertNumber maxFractionDigits="2" minFractionDigits="2"  groupingUsed="false"  />
                                </h:outputText>                                        
                            </p:column>

                            <p:column id="idSaldoCaja" style="width: 10%;text-align: center"
                                      sortBy="#{movimientoCajaChica.saldoCaja}" 
                                      exportable="true">    
                                <f:facet name="header">  
                                    <h:outputText value="Saldo Caja" />  
                                </f:facet>
                                <h:outputText value="#{movimientoCajaChica.saldoCaja}" >
                                    <f:convertNumber maxFractionDigits="2" minFractionDigits="2"  groupingUsed="true" 
                                                     currencySymbol="S/." type="currency"/>
                                </h:outputText>                                        
                            </p:column>

                            <p:column id="idTipoMov" style="width: 10%;text-align: center" rendered="false"
                                      sortBy="" exportable="true">
                                <f:facet name="header">  
                                    <h:outputText value="Tipo" />  
                                </f:facet>
                                <h:outputText value="#{movimientoCajaChica.tipoMovimiento}" style="#{movimientoCajaChica.tipoMovimiento eq 'ENTRADA'?'color: blue':'color: red'};font-weight: bold"/>
                            </p:column>

                            <p:column id="idAccionesMovimientoCajaChica" headerText="#{message['general.label.tipoAcesso']}" style="width: 10%" exportable="false">
                                <center>
                                    <p:commandButton icon="ui-icon-search" title="#{message['general.button.ver']}" oncomplete="carDialog.show()" update=":formulario:display" ajax="true"
                                                     process="@this">
                                        <f:setPropertyActionListener value="#{movimientoCajaChica}" target="#{BKMovimientoCajaChica.movCajaChicaFormulario}" />  
                                    </p:commandButton>                                                                                
                                    <p:commandButton icon="ui-icon-pencil" title="#{message['general.button.editar']}" action="#{MBCajaChica.editarMovimiento}" immediate="true" 
                                                     ajax="false"  >
                                        <f:setPropertyActionListener value="#{movimientoCajaChica}" target="#{BKMovimientoCajaChica.movCajaChicaSeleccionado}" />  
                                    </p:commandButton>
                                    <p:commandButton icon="ui-icon-folder-collapsed" title="#{movimientoCajaChica.estadoMovimiento eq 'C'?'ver detalle de movimiento':'sustentar movimiento'}" 
                                                     action="#{MBCajaChica.sustentarMovimiento}" 
                                                     immediate="true" ajax="false" disabled="#{movimientoCajaChica.estadoMovimiento eq 'B'}">
                                        <f:setPropertyActionListener value="#{movimientoCajaChica}" target="#{BKMovimientoCajaChica.movCajaChicaSeleccionado}" />  
                                    </p:commandButton> 

                                    <p:commandButton id="btnEliminarMovimientoCajaChica" title="#{message['general.button.eliminar']}" icon="ui-icon-trash"
                                                     oncomplete="confirmacion.show()" process="@this" disabled="#{(movimientoCajaChica.esAnulable()) }" >
                                        <f:setPropertyActionListener value="#{movimientoCajaChica}" target="#{BKMovimientoCajaChica.movCajaChicaSeleccionado}" />
                                    </p:commandButton>  


                                </center>         
                            </p:column>

                        </p:dataTable>

                        <!-- Ver detalle de movimiento seleccionado-->
                        <p:dialog id="carDlg" header="***** DETALLE DEL MOVIMIENTO *****" widgetVar="carDialog" resizable="false"   
                                  showEffect="fade" hideEffect="explode" modal="true" style="text-align:left" dynamic="true">  

                            <h:panelGrid id="display" columns="2" cellpadding="4" style="margin:15px;">  

                                <h:outputText value="NOMBRE: " styleClass="lblForm"  />
                                <h:outputText value="#{BKMovimientoCajaChica.movCajaChicaFormulario.nombre}"/>

                                <h:outputText value="SOLICITANTE: " styleClass="lblForm"  />  
                                <h:outputText value="#{BKMovimientoCajaChica.movCajaChicaFormulario.solicitante}"/>  

                                <h:outputText value="MOTIVO: " styleClass="lblForm"  />  
                                <h:outputText value="#{BKMovimientoCajaChica.movCajaChicaFormulario.motivo}"/>  

                                <h:outputText value="MONTO: " styleClass="lblForm"  />  
                                <h:outputText value="#{BKMovimientoCajaChica.movCajaChicaFormulario.monto}"/>  

                                <h:outputText value="POR RENDIR: " styleClass="lblForm"  />  
                                <h:outputText value="#{BKMovimientoCajaChica.movCajaChicaFormulario.saldo}"/>  

                                <h:outputText value="FECHA SOLICITUD: " styleClass="lblForm"  />  
                                <h:outputText value="#{BKMovimientoCajaChica.movCajaChicaFormulario.fechaSolicitud}">
                                    <f:convertDateTime pattern="dd/MM/yyyy" />
                                </h:outputText>

                                <h:outputText value="FECHA CIERRE: " styleClass="lblForm"  />  
                                <h:outputText value="#{BKMovimientoCajaChica.movCajaChicaFormulario.fechaCierre}">
                                    <f:convertDateTime pattern="dd/MM/yyyy" />
                                </h:outputText>

                                <h:outputText value="ESTADO: " styleClass="lblForm"  />  
                                <h:outputText value="#{BKMovimientoCajaChica.movCajaChicaFormulario.descEstadoMovimiento}"/>  

                                <h:outputText value="UN: " styleClass="lblForm"  />  
                                <h:outputText value="#{BKMovimientoCajaChica.movCajaChicaFormulario.descTipoUnidadNegocio}" />  

                                <h:outputText id="lblMotivo" value="MOTIVO: " styleClass="lblForm"  />  
                                <h:outputText value="#{BKMovimientoCajaChica.movCajaChicaFormulario.motivo}"/>  

                                <h:outputText id="lblDescripcion" value="DESCRIPCION: " styleClass="lblForm"  />  
                                <h:outputText value="#{BKMovimientoCajaChica.movCajaChicaFormulario.descripcion}"/>  

                            </h:panelGrid>  

                        </p:dialog>

                    </p:panel>  

                    <center>
                        <h:panelGrid columns="2" cellpadding="10">

                            <p:commandButton id="btnRegresar" action="#{MBCajaChica.retroceder()}" ajax="false" immediate="true"
                                             value="Regresar" title="#{message['general.button.atras']}" />

                        </h:panelGrid>
                    </center>		

                    <p:confirmDialog id="dlgEliminarCajaChica" message="¿Esta seguro que desea eliminar el movimiento?" 
                                     header="Eliminar Movimiento" severity="alert" widgetVar="confirmacion">

                        <h:panelGrid style="width: auto;margin:0px auto;border:0px;padding: 0 5px" columns="2">
                            <p:commandButton id="btnConfEliMovimiento" update="dataTablaMovimientos,panelConsultaMovimientos" value="Si" oncomplete="confirmacion.hide()"
                                             actionListener="#{MBCajaChica.eliminarMovimiento}" process="@this" >        
                            </p:commandButton>

                            <p:commandButton id="btnCancEliMovimiento" value="No" 
                                             onclick="confirmacion.hide()">                                          
                            </p:commandButton>
                        </h:panelGrid>

                    </p:confirmDialog>

                </h:form>
            </f:view>
        </ui:define>

    </ui:composition>
</html> 













